/*
 * @Description: 购票记录单一记录组件
 * @Author: shuaishuai.wang
 * @Date: 2019-08-21 09:57:23
 * @Last Modified by: ziwei.ma
 * @Last Modified time: 2019-10-21 20:21:10
 */
<template>
  <div
    class="record_main fontsize32"
    @click="skipToRecordDetails"
  >
    <div class="main_info flex-h flex-hsb">
      <div>
        <i class="iconfont icon-bus fontsize48"></i>
        <h4>{{record.ROUTE_NAME}} {{record.TICKET_DATE_TYPE | ticketTypeFormate}}</h4>
      </div>
      <p>{{record.ORDER_STATE | recordTypeFormate}}</p>
    </div>
    <div class="other_info">
      <p><span>班次：</span>{{record.TRAIN_NUM}}</p>
      <p><span>数量：</span>{{record.TICKET_TYPE_COUNT}}张</p>
      <p><span>实付：</span>￥{{record.PAY_PRICE | priceFilters}}</p>
    </div>
  </div>
</template>

<script>
import { ticketTypeFormate, recordTypeFormate, priceFilters } from '@/wx/customizedShuttleBus/filters/filters'
export default {
  props: {
    record: {
      type: Object,
      default: null
    }
  },
  filters: {
    ticketTypeFormate,
    recordTypeFormate,
    priceFilters
  },
  methods: {
    skipToRecordDetails() { // 跳转至车票信息详情
      this.$router.push({ path: 'details', query: { orderNo: this.record.ORDER_NO } })
    }
  }
}
</script>

<style lang="scss" scoped>
.record_main {
  width: 622px;
  background-color: #fff;
  margin: auto;
  margin-bottom: 32px;
  padding: 32px;
  .main_info {
    border-bottom: 1px solid #ddd; /*no*/
    h4 {
      color: #000000;
      font-weight: 400;
      height: 64px;
      line-height: 64px;
      display: inline-block;
    }
    i {
      height: 48px;
      position: relative;
      top: 4px;
      display: inline-block;
      color: #027aff;
    }
    p {
      height: 64px;
      line-height: 64px;
      color: #027aff;
    }
  }
  .other_info {
    p {
      font-size: 28px;
      margin-top: 16px;
      color: #999;
    }
  }
}
</style>
